<template>
  <view class="container">
    <view class="cus-navigationStyle">
    </view>
    <!--   <view class="tabs">
      <view class="collected-house">
        <image class="house-icon" :src="baseImgUrl + 'shiyoufangwu1.png'"></image>
        <view class="content-wrap">
          <view class="content">已采集房屋</view>
          <view class="num">{{ yconts }}</view>
        </view>
      </view>
      <view class="collected-house uncollected-house">
        <image class="house-icon" :src="baseImgUrl + 'shiyoufangwu2.png'"></image>
        <view class="content-wrap">
          <view class="content">待采集房屋</view>
          <view class="num">{{ wconts }}</view>
        </view>
      </view>
    </view> -->

    <view class="list-content">
      <view class="sub-tabs-wrap">
        <view class="sub-tabs" @click="tabClick(item.value)" :class="{ 'tab-active': type === item.value }"
          v-for="(item,index) in houseCategoryList" :key="index">
          <view class="name">{{item.text}}</view>
          <view class="name num">({{ item.counts }})</view>
        </view>
        <!-- <view class="sub-tabs" @click="tabClick(41)" :class="{ 'tab-active': type === 41 }">
          <view class="name">街路巷</view>
          <view class="name num">({{ srLaneCount }})</view>
        </view>
        <view class="sub-tabs" @click="tabClick(43)" :class="{ 'tab-active': type === 43 }">
          <view class="name">单位(住宅)院</view>
          <view class="name num">({{ unitCount }})</view>
        </view>
        <view class="sub-tabs" @click="tabClick(44)" :class="{ 'tab-active': type === 44 }">
          <view class="name">自然村</view>
          <view class="name num">({{ nVillageCount }})</view>
        </view> -->
      </view>

      <view class="search-wrap">
        <u--input placeholder="请输入关键词搜索" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
          shape="circle" v-model="likeName" @change="input_change"></u--input>
      </view>

      <view class="list-container">
        <scroll-view scroll-y="true" @scrolltolower="scrollBottom" @scroll="scrollHeight"
          :style="{ height: !loading && !noMore ? '100%' : '100%' }" v-if="dataSource.length">
          <view class="list-item" v-for="item in dataSource"
            :data-url="`/actual_real_estate/real_estate_list?fDzbm=${item.fDzbm}`" @click="handleClickRouter">
            <view class="address-name">{{ item.fJlxxqmc }}</view>
            <view class="collected-house">
              已采集标准地址: <text>{{ item.collected }}间</text>
            </view>
            <view class="uncollected-house collected-house">
              待采集标准地址: <text>{{ item.notCollected }}间</text>
            </view>
          </view>
          <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
        </scroll-view>

        <view v-if="!dataSource.length">
          <u-empty mode="list" text="暂无内容！" :icon="baseImgUrl + 'no-icon2.png'">
          </u-empty>
        </view>
      </view>
    </view>

    <view class="btns">
      <button class="submit-btn" type="primary" style="width: 100%" @click="handleAddMessingAddress">
        缺失地址上报
      </button>
      <button class="submit-btn" type="primary" style="width: 100%"
        :data-url="`/actual_real_estate/real_estate_add?type=add`" @click="handleClickRouter">
        完善房屋信息
      </button>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    houseTypeList
  } from "../api/api";
  import {
    getAction,
    postAction
  } from "@/utils/request.js";
  import {
    handleClickRouter,
    navTo
  } from "@/utils/util.js";
  export default {
    data() {
      return {
        yconts: 0, // 已采集总数
        wconts: 0, // 待采集总数
        nVillageCount: 0, // 自然村总数
        unitCount: 0, // 单位(住宅)院总数
        srLaneCount: 0, // 街路巷总数
        residentialCount: 0, // 小区总数
        type: 41, // 房屋类型
        likeName: "", // 检索条件

        dataSource: [],
        pageBottom: false,
        baseImgUrl: this.$baseImgUrl,
        scrollTop: 0,
        pageConfig: {
          pageNo: 1,
          pageSize: 10,
          total: 0,
        },
        houseCategoryList: []
      };
    },
    async onLoad() {
      this.scrollTop = 0;
      uni.removeStorageSync("scrollTop");
      this.scrollTop = uni.getStorageSync("scrollTop") || 0;
      await this.getHouseCategoryList()
      this.initPage()
      uni.$on('real_estate_add', () => {
        this.initPage()
      })
    },
    onUnload() {
      uni.$off('real_estate_add')
    },
    async onShow() {},
    methods: {
      async initPage() {
        this.pageConfig.pageNo = 1;
        this.dataSource = [];
        await this.getList();
      },
      handleClickRouter,
      scrollHeight(e) {
        uni.setStorageSync("scrollTop", e.detail.scrollTop);
      },
      scrollBottom(e) {
        let current = (this.pageConfig.pageNo += 1);
        let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
        if (current <= pages) this.getList();
        else this.pageBottom = true;
      },

      input_change(e) {
        this.scrollTop = 0;
        uni.removeStorageSync("scrollTop");
        this.pageConfig.pageNo = 1;
        this.dataSource = [];
        this.getList();
      },

      tabClick(type) {
        this.type = type;
        this.scrollTop = 0;
        uni.removeStorageSync("scrollTop");
        this.pageConfig.pageNo = 1;
        this.dataSource = [];
        this.getList();
      },
      async getHouseCategoryList() {
        try {
          let res = await houseTypeList()
          this.houseCategoryList = res.result
          // 设置 type
          this.type = this.houseCategoryList[0].value
        } catch (e) {
          //TODO handle the exception
        }
      },
      async getList() {
        let data = {
          type: this.type,
          likeName: this.likeName,
          pageNo: this.pageConfig.pageNo,
          pageSize: this.pageConfig.pageSize,
        };
        try {
          const {
            result
          } = await getAction(`/indeed/house/houseList`, data);
          this.yconts = result.yconts; // 已采集总数
          this.wconts = result.wconts; // 待采集总数
          this.residentialCount = result.residentialCount; // 小区总数
          this.srLaneCount = result.srLaneCount; // 街路巷总数
          this.unitCount = result.unitCount; // 单位(住宅)院总数
          this.nVillageCount = result.nVillageCount; // 自然村总数
          this.dataSource = this.dataSource.concat(result.tabulationList || []);
          this.pageConfig.total = result.total;
        } catch (error) {
          console.log("error", error);
        }
      },
      handleAddMessingAddress() {
        navTo({
          url: '/actual_real_estate/missingAddress/index'
        })
      }
    },
  };
</script>

<style scoped lang="scss">
  .container {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #f0f2f5;

    .cus-navigationStyle {
      height: 160rpx;
      background: #2488F5;
      position: absolute;
      z-index: 1;
      width: 100%;

      text {
        color: #ffffff;
        position: absolute;
        top: 80rpx;
        left: 50%;
        transform: translateX(-50%);
        font-size: 30rpx;
      }
    }

    .tabs {
      position: absolute;
      top: 47rpx;
      left: 50%;
      transform: translateX(-50%);

      width: 718rpx;
      height: 160rpx;
      background: #ffffff;
      border-radius: 8rpx;

      display: flex;
      padding: 32rpx 40rpx;

      image {
        width: 96rpx;
        height: 96rpx;
        border-radius: 50%;
      }

      .collected-house {
        flex: 1;
        display: flex;
        border-right: 1rpx solid #d5d4d4;
        z-index: 1;

        .content-wrap {
          margin-left: 16rpx;

          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .content {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #9a9a9a;
          }

          .num {
            font-family: DIN, DIN;
            font-weight: 500;
            font-size: 36rpx;
            color: #000000;
          }
        }
      }

      .uncollected-house {
        flex: 1;
        border-right: none;
        justify-content: flex-end;
        padding-right: 20rpx;
      }
    }

    .list-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin: 12rpx;
      background: #fff;
      min-height: 0;
      z-index: 1;
      border-radius: 16rpx 16rpx 16rpx 16rpx;

      padding: 18rpx 10rpx;

      .sub-tabs-wrap {
        display: flex;
        overflow: auto;
        width: 100%;

        .sub-tabs {
          width: 200rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
          flex-shrink: 0;
          height: 96rpx;
          background: #f4f5f7;
          border-radius: 8rpx;
          padding: 11rpx 17rpx;

          margin-right: 15rpx;

          &:nth-last-of-type(1) {
            margin-right: 0;
          }

          .name {
            font-weight: 500;
            font-size: 26rpx;
            color: #aaaaaa;
          }
        }

        .tab-active {
          background: #edf7ff;

          .name {
            font-weight: bold;
            font-size: 28rpx;
            color: #000000;
          }
        }
      }

      .search-wrap {
        margin: 20rpx 0;
      }

      .list-container {
        flex: 1;
        overflow: scroll;

        .list-item {
          height: 200rpx;
          padding: 20rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          border-bottom: 1rpx solid #f4f5f7;

          &:nth-last-of-type(1) {
            border: none;
          }

          .address-name {
            font-weight: bold;
            font-size: 30rpx;
            color: #000000;
          }

          .collected-house {
            font-weight: 400;
            font-size: 26rpx;
            color: #a2a0a0;

            text {
              color: #6b6b6b;
              margin-left: 10rpx;
            }
          }
        }
      }
    }

    .btns {
      margin: 0 12rpx;
      gap: 40rpx;
    }
  }
</style>